<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2020 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div [class.hidden]="!loading">
    <winery-loader></winery-loader>
</div>
<div *ngIf="!loading">
    <div class="right">
        <button class="btn btn-info" (click)="onAddSubType()">
            Add a subtype
        </button>
        <button class="btn btn-primary left-margin-10" name="save" (click)="saveToServer()"
                [disabled]="!sharedData?.currentVersion?.editable">
            Save
        </button>
    </div>
    <div class="form-group">
        <label class="control-label">Abstract</label>
        <select [(ngModel)]="inheritanceApiData.isAbstract" [disabled]="!sharedData?.currentVersion?.editable"
                class="form-control" style="width: 100px">
            <option [selected]="inheritanceApiData.isAbstract === 'yes'">yes</option>
            <option [selected]="inheritanceApiData.isAbstract === 'no'">no</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label">Final</label>
        <select [(ngModel)]="inheritanceApiData.isFinal" [disabled]="!sharedData?.currentVersion?.editable"
                class="form-control" style="width: 100px">
            <option [selected]="inheritanceApiData.isFinal === 'yes'">yes</option>
            <option [selected]="inheritanceApiData.isFinal === 'no'">no</option>
        </select>
    </div>

    <div *ngIf="inheritanceApiData.cyclicInheritance" class="alert alert-danger">
        There is a cyclic inheritance definition!
    </div>

    <label class="control-label">Derived From</label>
    <ng-select #derivedFromSelector
               [disabled]="!sharedData?.currentVersion?.editable"
               [items]="availableSuperClasses"
               (selected)="onSelectedValueChanged($event)"
               [active]="initialActiveItem">
    </ng-select>
    <br>
    <button class="btn btn-info btn-sm" [disabled]="!enableButton" (click)="onButtonClick()">Open</button>
</div>

<winery-add-component #addSubTypeModal
                      [namespace]="sharedData.toscaComponent.namespace"
                      [toscaType]="toscaType"
                      [inheritFrom]="sharedData.toscaComponent.getQName()">
</winery-add-component>
